<template  >
<div v-for="props in personData" :key="props" >
  <div class="da" v-if="this.personData[0].special == 1">  
    <div class="top">
         <font size='12' face='STHeiTi' color='red' >当您看见这句话时说明您是特殊用户</font>
      <el-row :gutter="20">
        <el-col :span="1"></el-col>
        <el-col :span="22">
          <el-card
            class="box-card"
            v-for="props in types"
            :key="props"
            @click="tanchu(props)"
          >
            <div class="title"><h4>{{ props.departmentName }}</h4></div>
             <el-divider />
             <div v-for="shuju in props.children" :key="shuju">
               <div class="xiao">{{shuju.departmentName}}</div>
             </div>
             
          </el-card>
        </el-col>
        <el-col :span="1"></el-col>
      </el-row>
    </div>

    <el-dialog v-model="dialogVisible" :title="props.departmentName">
      <el-table :data="props.children" style="width: 100%" v-show="props">
        <el-table-column
          prop="departmentName"
          label="门诊"
          width="600"
        /><el-table-column fixed="right" label="操作" width="100">
          <template #default="row">
            <el-button type="primary" round @click="xuanze(row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog v-model="centerDialogVisible" width="65%" center @close="shuxin">
      <h1>{{ title }}</h1>
      <el-row :gutter="20">
        <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
        <el-col :span="22"
          ><template v-for="time in week" :key="time">
            <el-button size="large" class="time" @click="piqi(time)"
              >{{ time.ts }}<br />{{ time.xq }}</el-button
            >
          </template></el-col
        >
        <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
      </el-row>

      <el-dialog v-model="innerVisible" width="25%" title="挂号" append-to-body>
        <el-form label-width="120px">
          <el-form-item label="日期:">
            {{ Edit.day }}
          </el-form-item>
          <el-form-item label="医生:">
            {{ Edit.docName }}
          </el-form-item>
          <el-form-item label="类型:" v-if="this.special == 0">
            {{ Edit.feeName}} :{{Edit.money}}元
          </el-form-item>
          <el-form-item v-if="this.special == 1" label="类型:">
            {{ Edit.feeName}} :0元
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input v-model="patient.real_name" placeholder="请输入患者姓名" />
          </el-form-item>
          <el-form-item label="电话:">
            <el-input
              v-model="patient.telephone"
              placeholder="请输入患者电话"
            />
          </el-form-item>
          <el-form-item label="身份证:">
            <el-input
              v-model="patient.patient_id"
              placeholder="请输入患者身份证号"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="success" round @click="queren">确认</el-button>
          </span>
        </template>
      </el-dialog>
      <div class="guahao">
        <el-table
          :data="guahao"
          style="width: 100%"
          v-if="guahao != null && guahao != {}"
        >
          <el-table-column prop="img" width="100">
            <!--插入图片链接的代码-->
            <template #default="row">
              <el-image :src="row.row.img" style="width: 70px; height: 70px" />
            </template>
          </el-table-column>

          <el-table-column prop="docName" label="姓名" width="120" />
          <el-table-column prop="amwork" label="上午科室" width="120" />
          <el-table-column prop="pmwork" label="下午科室" width="120" />
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="row">
              <el-button type="primary" round @click="guahao1(row)"
                >挂号</el-button
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="余号" width="100">
            <template #default="row2">
              <el-button type="success" round>{{row2.row.countLeft}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <div class="putong" v-if="this.personData[0].special == 0">
    <h1 align="center">
    <font size="12" color="red" >抱歉 本页面非特殊用户禁止访问</font>
    </h1>
  </div>
</div>
  
 
</template>

<script>
import { ElMessage } from "element-plus";
import { get } from "@/utils/request";
export default {
  name: "infoIndex",
  inject: ["reload"],
  data() {
    return {
      types: [],
      centerDialogVisible: false,
      dialogVisible: false,
      title: "",
      week: [],
      doctor: [],
      keshi: [],
      departmentId: "",
      guahao: [],
      innerVisible: false,
      Edit: [],
      patient: {
        patient_id:sessionStorage.patient_id,
        telephone:sessionStorage.telephone,
        real_name:sessionStorage.real_name,
        special:sessionStorage.special
      }, //患者
      props: [],
      special:[],
      personData: [],
    };
  },
  mounted() {
    console.log(sessionStorage.special);
    get("/getAllDepartments").then((res) => {
      this.types = res.data;
      console.log(this.types);
    });
    this.getWeek();
    this.special=sessionStorage.special
    get("/getPersonage", {
        patientId: this.patient.patient_id,
      }).then((res) => {
        this.personData = res.data;
        console.log(res)
        console.log(this.personData[0].special);
      });
  },
  methods: {
    xuanze(row) {
      console.log(row);
      this.centerDialogVisible = true;
      this.title = row.row.departmentName;
      this.departmentId = row.row.departmentId;
      get("/getDoctorsId", {
        departId2: row.row.departmentId,
      }).then((res) => {
        this.doctor = res.data;
        console.log(this.doctor);
        //   ElMessage({
        //     message: '修改成功！',
        //     type: 'success'
        //   })
      });
    },
    getWeek() {
      var currentTime = new Date();
      var nowDayOfWeek = currentTime.getDay(); //当前周的第几天
      var nowDay = currentTime.getDate(); //当前日
      var nowMonth = currentTime.getMonth(); //当前月
      var nowYear = currentTime.getFullYear(); //当前年
      currentTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1); //完整日期
      var weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      for (var i = 0; i < 7; i++) {
        if (i == 0) {
          currentTime = currentTime.setDate(currentTime.getDate());
        } else {
          currentTime = currentTime.setDate(currentTime.getDate() + 1);
        }
        currentTime = new Date(currentTime);
        var currentDays = currentTime.getDate();
        var currentMon = currentTime.getMonth() + 1;
        currentMon = this.doHandleMonth(currentMon);
        currentDays = this.doHandleMonth(currentDays);
        var dateDay = currentDays; //某一天
        var dates = {};
        this.currenttime = currentMon + "-" + nowDay;
        dates.Monthday = currentMon + "-" + dateDay;
        dates.xq = weeks[i];
        dates.ts = nowYear + "-" + currentMon + "-" + currentDays;
        this.week.push(dates);
      }
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    piqi(row) {
      get("/getRegistration", {
        day: row.ts,
        departId2: this.departmentId,
      }).then((res) => {
        this.guahao = res.data;
        for(var i=0;i<this.guahao.length;i++){
          if(this.guahao[i].amwork=='0')
            this.guahao[i].amwork='休息';
          if(this.guahao[i].pmwork=='0')
            this.guahao[i].pmwork='休息';
        }
      });
    },
    shuxin() {
      this.reload();
    },
    guahao1(row) {
      this.Edit = row.row;
      this.innerVisible = true;
    },
    queren() {
      console.log(this.Edit);
      console.log(this.patient);
      this.innerVisible = false;
      this.dialogVisible=false;
      get("/addPatientDoctor", {
        day: this.Edit.day,
        departId2: this.Edit.departId2,
        docId: this.Edit.docId,
        name: this.patient.real_name,
        patientId: this.patient.patient_id,
        telephone: this.patient.telephone,
        special:this.patient.special,
      })
        .then((res) => {
          ElMessage({
            message: "挂号成功",
            type: "success",
          });
          location.reload();

        })
        .catch(() => {
          ElMessage.error("挂号失败，请输入相应的信息");
        });
      this.patient = [];
    },
    
    tanchu(props) {
      this.dialogVisible = true;
      this.props = props;
      console.log(this.props);
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  margin-top: 15px;
}

.guahao {
  margin-top: 25px;
  margin-left: 65px;
}
.dialog-footer {
  margin-top: 5px;
}
.da {
  width: 100%;
}
.box-card {
  width: 22%;
  margin-left: 25px;
  margin-top: 15px;
  height: 120px;
  float: left;
  cursor:pointer;
}
.box-card:hover{
  background-color: #157a35;
  color: rgb(180, 215, 166);
  .title{
    color: rgb(251, 251, 251);
  }
}
.title{
  color: #157a35;//科室大标题
  margin-top: -20px;
}
.xiao{
   float: left;
   margin-left: 5px;
   margin-top: -5px;
   font-style: -3px;
   font-size:13px;
}
.putong{
  text-align:cente
}
</style>
